<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <!-- 数据渲染 -->
      <van-cell v-for="(item,index) in list" :key="index" :title="item.title" />
    </van-list>
  </div>
</template>

<script>
import { getSearch } from '@/api/search'
export default {
  name: 'SearchList',
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1 // 第几页
    }
  },
  methods: {
    async  onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1)
    //     }

      //     // 加载状态结束
      //     this.loading = false

      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //       this.finished = true
      //     }
      //   }, 1000)
      // 调用方法
      // 发请求获取数据
      const { data: { data: { results } } } = await getSearch({
        page: this.page,
        per_page: 20,
        q: this.searchText
      })
      // 方式1：分开写
      // 把数据放入list中
      // this.list.push(...results)
      // // 关闭loading
      // this.loading = false
      // // 判断是否结束
      // if (results.length === 0) {
      //   this.finished = true
      // }
      // // 页码值增加1
      // this.page++
      // 方式二：一起写
      Object.assign(this, {
        list: [...this.list, ...results],
        loading: false,
        finished: results.length === 0,
        page: this.page + 1
      })
    }
  }
}
</script>

<style>
</style>